import React, { Component } from 'react'
// 表单处理数据处理方案
//  + 受控组件 -- 使用多
//    表单项中的数据是通过state中的数据来进行显示的，而表单项通过onChange事件给state中的数据进行更新
//    value、checked/onChange
//  + 非受控组件
//    表单项中的数据没有受到state控制

class App extends Component {
  state = {
    uname: 'admin',
    pass: 'admin888'
  }

  setUame = (e) => {
    this.setState({ uname: e.target.value })
  }
  setPass = (e) => {
    this.setState({ pass: e.target.value })
  }
  onLogin = () => {
    console.log(this.state)
  }

  render() {
    const { uname, pass } = this.state
    return (
      <div>
        <div>
          账号：
          {/* 表单项中的value受到state中数据控制，表单项中通过onChange去修改state中的数据 */}
          <input type="text" value={uname} onChange={this.setUame} />
        </div>
        <div>
          密码：
          <input type="text" value={pass} onChange={this.setPass} />
        </div>
        <div>
          <button onClick={this.onLogin}>进入系统</button>
        </div>
      </div>
    )
  }
}

export default App
